<template>
  <el-container class="license-warp">
    <div class="top">
      <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="2"
        :labelWidth="110"
        formType="add"
        :isSubmitBtn="false"
        @formChange="getClssList"
      />
      <el-row>
        <el-button @click="query" type="primary" :loading="addBtnState">查 询</el-button>
        <el-button @click="reset" type="primary" :loading="addBtnState">重 置</el-button>
      </el-row>
    </div>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => this.columns = columns"
      :onRowSelectChange="arr => this.onChangeColumn = arr"
    ></FilterTable>
    <div class="footer">
      <el-button @click="saveDialog" type="primary" :loading="addBtnState">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </el-container>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { vehicleOwner } from '@/api/derived/insurance/insurancePolicy';

export default {
  name: 'LicenseSea',
  props: [''],
  mixins: [dictionary],

  data() {
     this.BaseTable =null;
    return {
      formList: this.createFormList(),
      addBtnState: null,
      fetchApi: vehicleOwner,
      fetchParams: { xhrAbort: false },
      columns: this.createTableColumns(),
      onChangeColumn: []
    };
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '车主姓名',
          fieldName: 'ownerName',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车主手机',
          fieldName: 'mobile',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车主电话',
          fieldName: 'phone',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: ''
        },
        {
          type: 'RANGE_DATE',
          label: '创建日期',
          fieldName: 'ownerEndDateFrom|ownerEndDateTo',
          dateFormat:'yyyy-MM-dd'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '订单编号',
          dataIndex: 'SO_NO',
          sorter: true
        },
        {
          title: '车主编号',
          dataIndex: 'OWNER_NO',
          sorter: true
        },
        {
          title: '车主姓名',
          dataIndex: 'OWNER_NAME',
          sorter: true
        },
        {
          title: '车主性质',
          dataIndex: 'OWNER_PROPERTY',
          sorter: true,
            render: props => {
            return <span>{this.createDictText(props.row.OWNER_PROPERTY, '8011')}</span>;
          }
        },
        {
          title: '手机',
          width:120,
          dataIndex: 'MOBILE',
          sorter: true
        },
        {
          title: '电话',
          width:120,
          dataIndex: 'PHONE',
          sorter: true
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          width:150,
          sorter: true
        },
        {
          title: '品牌',
          dataIndex: 'BRAND_NAME',
          sorter: true
        },
        {
          title: '车系',
          width:120,
          dataIndex: 'SERIES_NAME',
          sorter: true
        },
        {
          title: '车型',
          width:120,
          dataIndex: 'MODEL_NAME',
          sorter: true
        },
        {
          title: '是否本公司销售',
          dataIndex: 'IS_SELF_COMPANY',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.IS_SELF_COMPANY, '1004')}</span>;
          }
        },
        // {
        //   title: '经销商',
        //   dataIndex: 'SALES_AGENT_NAME',
        //   sorter: true
        // },
        {
          title: '销售日期',
          dataIndex: 'SALES_DATE',
          sorter: true,
          dateFormat:'yyyy-MM-dd'
        },
        {
          title: '证件类型',
          dataIndex: 'CERTIFICATE_TYPE',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.CERTIFICATE_TYPE, '8013')}</span>;
          }
        },
        {
          title: '证件号码',
          dataIndex: 'CERTIFICATE_CODE',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '地址',
          dataIndex: 'ADDRESS',
          sorter: true,
          hidden:true
        },
        {
          title: '邮编',
          dataIndex: 'ZIP_CODE',
          sorter: true,
          hidden:true
        },
        {
          title: '发动机号',
          dataIndex: 'ENGINE_NO',
          sorter: true,
          hidden:true
        },
        {
          title: '排量/功率(L/K)',
          dataIndex: 'ENGINE_DESC',
          sorter: true,
          hidden:true
        }
      ];
    },
    formChangeHandle() {},
    query() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    reset() {
      this.$refs.formPanel.RESET_FORM();
      this.getClssList();
    },
    closeDialog() {
      this.$emit('closeDialog', false);
    },
    saveDialog() {
      this.$emit('saveDialog', this.onChangeColumn);
    },
    getClssList(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    }
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.query();
  }
};
</script>
<style lang="less" scoped>
.license-warp {
  flex-direction: column;

  .top {
    width: 100%;
    display: flex;
    flex-direction: column;

    .el-row {
      text-align: center;
    }
  }

  .footer {
    text-align: center;
  }
}
</style>
